<template>
  <div class="dashboard-container" >
    顾客信息管理
    <el-dialog
      title="新增"
      :visible.sync="addButtonController"
      width="30%"
      @close="close('ruleForm')">

      <el-form :rules="roles" label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="顾客名称" prop="customerName">
          <el-input v-model="addList.customerName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入顾客名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="addList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationCard">
          <el-input v-model="addList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="add('ruleForm')">确定</el-button>
        <el-button  @click="close('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="拉黑" :visible.sync="blackListButtonController" width="30%" @close="closeBlackList('ruleForm')">
      <el-form :rules="roles" label-width="20%" :model="blackList" ref="ruleForm">
        <el-form-item label="顾客ID" prop="customerId">
          <el-input v-model="blackList.customerId" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入顾客ID"/>
        </el-form-item>
        <el-form-item label="失信程度" prop="state">
          <el-input v-model="blackList.state" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入失信程度"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="blackList.remark" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="addBlackList('ruleForm')">确 定</el-button>
        <el-button plain @click="closeBlackList('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="修改"
      :visible.sync="updateButtonController"
      width="30%"
      @close="closeUpdate('ruleForm')">

      <el-form :rules="roles" label-width="20%" :model="updateList" ref="ruleForm">
        <el-form-item label="顾客名称" prop="customerName">
          <el-input v-model="updateList.customerName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入顾客名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="updateList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationCard">
          <el-input v-model="updateList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="update('ruleForm')">确定</el-button>
        <el-button  @click="closeUpdate('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <!--删除弹窗-->
    <el-dialog title="删除" :visible.sync="deleteButtonController" width="30%" @close="closeDelete('ruleForm')">
      <div style="margin: 10px"><span>请确认是否删除</span></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="info" plain @click="deleteCustomer('ruleForm')">确定</el-button>
          <el-button plain @click="closeDelete('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:10% ;" @click="addButton">新增</el-button>
    <el-input
      v-model="customerName"
      placeholder="顾客名称"
      name="customerName"
      type="text" clearable
      style="margin-left: 40px;width: 180px"/>
    <el-input
      v-model="phoneNumber"
      placeholder="顾客电话"
      name="phoneNumber"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-input
      v-model="identificationCard"
      placeholder="顾客身份证号"
      name="identificationCard"
      type="text" clearable
      style="margin-left: 40px;width: 180px"/>


    <el-button  type="primary" style="margin-left: 40px;width: 100px" @click="selectCustomer">查询</el-button>
    <el-button  style="margin-left: 40px;width: 100px" @click="checkCustomer">重置</el-button>


    <el-table :data="customerList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="600px" border style="width: 100%;margin-top:20px">
      <el-table-column align="center" fixed prop="customerId" sortable label="顾客ID"/>
      <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
      <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
      <el-table-column align="center" fixed prop="phoneNumber" sortable label="手机号"/>
      <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" fixed label="操作">
        <template v-slot="scope">
          <el-button  type="text"  @click="updateButton(scope.row)">修改</el-button>
          <el-button  type="text"  @click="deleteButton(scope.row)">删除</el-button>
          <el-button  type="text"  @click="blackListButton(scope.row)">拉黑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="customerList.length">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {deleteCustomer, insertCustomer, selectAllCustomer, updateCustomer} from "@/api/Customer";
import blackList from '@/views/blackList/blackList/index.vue'
import { insertBlackList, selectAllBlackList } from '@/api/blackList'

export default {
  name: 'user',
  computed: {
    blackList() {
      return blackList
    },
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      currentPage: 1,
      currentIndex: '',
      pagesize: 8,

      state:'',
      customerName: '',
      phoneNumber:'',
      identificationCard: '',
      customerList:[],
      states:[],

      addButtonController: false,
      updateButtonController: false,
      deleteButtonController: false,
      blackListButtonController: false,
      deleteCustomerId: '',
      deleteCustomerTableId:'',
      addList: {
        customerName:'',
        sex:'',
        phoneNumber: '',
        identificationCard: '',
        remark: '',
      },
      updateList: {
        customerTableId: '',
        customerId: '',
        customerName:'',
        sex:'',
        phoneNumber: '',
        identificationCard: '',
        remark: '',
      },
      blackList:{
        customerId:'',
        state:'',
        remark:'',
        debtMoney:'',
        debtDay:'',
        reputation:'',
      },
      roles:{
        customerName:[
          {required:true,trigger:'blur',message:'顾客名称不能为空'},
          {min:1,max:10,message: '请输入完整的顾客名称',trigger: 'blur'}
        ],
        phoneNumber:[
          {required:true,trigger:'blur',message:'手机号不能为空'},
          {min:11,max:11,message: '请输入11位手机号',trigger: 'blur'}
        ],
        identificationCard:[
          {required:true,trigger:'blur',message:'身份证号不能为空'},
          {min:18,max:18,message: '请输入18个字符的身份证号',trigger: 'blur'}
        ],
        sex:[
          {required:true,trigger:'blur',message:'性别不能为空'},
        ],
      }

    }
  },


  // 页面初始化时加载的方法
  mounted() {
    this.selectCustomer()
  },
  // 页面的方法和事件
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    selectCustomer(){
      selectAllCustomer({
        customerName:this.customerName,
        identificationCard:this.identificationCard,
        phoneNumber:this.phoneNumber
      }).then(
        response => {
          console.log(response.data)
          this.customerList=response.data
          if((this.roomList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)).length === 0){
            this.currentPage = 1
          }
        }
      )
    },
    checkCustomer(){
      this.customerName=''
      this.identificationCard =''
      this.phoneNumber=''
      this.selectCustomer()
    },
    addButton(){
      this.addList = {
        customerName:'',
        sex:'',
        phoneNumber: '',
        identificationCard: '',
        remark: '',
      }
      this.addButtonController = true
    },
    updateButton(row){
      this.updateList = {
        customerTableId:row.customerTableId,
        customerId:row.customerId,
        customerName:row.customerName,
        sex:row.sex,
        phoneNumber:row.phoneNumber,
        identificationCard:row.identificationCard,
        remark:row.remark
      }
      this.updateButtonController = true
    },

    deleteButton(row){
      this.deleteCustomerTableId = row.customerTableId
      this.deleteCustomerId = row.customerId
      this.deleteButtonController = true
    },

    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertCustomer({
            customerName:this.addList.customerName,
            sex:this.addList.sex,
            phoneNumber:this.addList.phoneNumber,
            identificationCard:this.addList.identificationCard,
            remark:this.addList.remark,
          }).then(
            response => {
              this.addButtonController = false
              this.$message.success("新增成功！");
              this.selectCustomer()
            }
          )
        } else {return false;}});},
    close(formName){
      this.$refs[formName].resetFields();
      this.addButtonController =false
      this.deleteButtonController =false
    },
    closeDelete(){
      this.addButtonController = false
      this.updateButtonController = false
      this.deleteButtonController = false
    },

    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateCustomer({
            customerTableId:this.updateList.customerTableId,
            customerId:this.updateList.customerId,
            customerName:this.updateList.customerName,
            sex:this.updateList.sex,
            phoneNumber:this.updateList.phoneNumber,
            identificationCard:this.updateList.phoneNumber,
            remark:this.updateList.remark,
          }).then(
            response => {
              this.updateButtonController = false
              this.selectCustomer()
            }
          )
        } else {return false;}});},
    closeUpdate(formName){
      this.$refs[formName].resetFields();
      this.updateButtonController =false
    },

    deleteCustomer(formName) {
      deleteCustomer({
        customerId:this.deleteCustomerId,
        customerTableId:this.deleteCustomerTableId
      }).then(
        async response => {
          this.deleteButtonController = false
          this.selectCustomer()
        })
    },
    addBlackList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 customerId 查询黑名单
          selectAllBlackList({ customerId: this.blackList.customerId }).then(response => {
            const filtered = response.data.filter(item => item.customerId === this.blackList.customerId);
            if (filtered.length > 0) {
              this.$message.warning("该顾客已在黑名单中！");
              return;
            }

            // 如果不在黑名单，则插入
            insertBlackList({
              customerId: this.blackList.customerId,
              state: this.blackList.state,
              remark: this.blackList.remark,
              debtMoney: this.blackList.debtMoney,
              debtDay: this.blackList.debtDay,
              reputation: this.blackList.reputation,
            }).then(response => {
              this.blackListButtonController = false;
              this.$message.success("拉黑成功！");
              this.selectCustomer();
            });
          });
        } else {
          return false;
        }
      });
    },
    closeBlackList(formName){
      this.$refs[formName].resetFields();
      this.addButtonController = false;
      this.updateButtonController = false;
    },
    blackListButton(row){
      this.blackList = {
        customerId: row.customerId,
        reputation: 0, // 默认值
        state: '',     // 用户选择
        remark: ''     // 用户填写
      }
      this.blackListButtonController = true
    },


  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
